<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<meta http-equiv="Pragma" content="no-cache" />
		<meta http-equiv="Cache-Control" content="no-cache" />
		<meta http-equiv="Expires" content="0" />
		<meta http-equiv="X-UA-Compatible" content="E=edge;chrome=1" />
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
		<title>嘉华金融</title>
        <link rel="stylesheet" type="text/css" href="<%=path%>/static/css/reset.css">
	    <link rel="stylesheet" type="text/css" href="<%=path%>/static/css/weui.min.css">
	    <link rel="stylesheet" type="text/css" href="<%=path%>/static/css/index.css">
	    <script type="text/javascript" src="<%=path%>/static/js/jquery-3.2.1.min.js"></script>
	    <script type="text/javascript" src="<%=path%>/static/js/jquery.qrcode.min.js"></script>
        <script type="text/javascript" src="<%=path%>/static/js/qrcode.js"></script>
	    <script type="text/javascript" src="<%=path%>/static/layer/layer.js"></script>
	    <script type="text/javascript" src="<%=path%>/static/js/weui.min.js"></script>
	    <script type="text/javascript" src="<%=path%>/static/js/html2canvas.js"></script>
    <style>
        .main {
            overflow: hidden;
            position: relative;
        }
        .pro-img1,.pro-img2 {
            float: left;
        }
        .QR-code {
            position: absolute;
            left: 50%;
            border: 5px solid #7c57ce;
            border-radius: 5px;
            transform: translateX(-50%);
            -moz-transform: translateX(-50%);
            -webkit-transform: translateX(-50%);
            -o-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
        }
        .top-img {
            overflow: hidden;
            position: relative;
        }
        html,body {
            width: 100%;
            height: 100%;
        }
        .promation-wrap {
            width: 100%;
            height: 100%;
            position: relative;
        }
        .show-img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display:none ;
        }
        .show-img>div {
            position: relative;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
        }
        .proimg-wrap {
            position: absolute;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
        }
        .proimg-wrap img {
            width: 100%;
        }
        .close {
            padding: 10px;
            text-align: right;
            color: #fff;
            font-size: 20px;
            z-index: 10;
        }
        .close img {
            width: 20px;
            height: 20px;
        }
    </style>
</head>
<body>
    <div class="promation-wrap">
        <div class="page-wrap">
            <div class="header">
                <div><div class="back"></div></div>
                <div>推广分享</div>
                <div></div>
            </div>
            <div class="main">
                <div class="top-img">
                    <img id="img" src="<%=path%>/file/getImg.html?saveAddress=${url}" alt="" class="pro-img1">    
                </div>  
                <img src="<%=path%>/static/img/tui23.jpg" alt="" class="pro-img2">
            </div>
        </div>
        <div class="show-img">
            <div>
                <div class="close"><img src="<%=path%>/static/img/close.png" alt=""></div>
                <img id='imgOne2'/>
                <div class="proimg-wrap"></div>     
            </div>
        </div>

    </div>
    <script src="https://res.wx.qq.com/open/js/jweixin-1.1.0.js"></script>
    <script type="text/javascript">
        var path="<%=path%>"
        var WIDTHP = $(window).width() / 320;
        var HEIGHTP = $(window).height() / 568;
        console.log($(window).width(),$(window).height())
        $(".pro-img1").width(320 * WIDTHP);
        //$(".pro-img1").height(298 * HEIGHTP);
        $(".pro-img2").width(320 * WIDTHP);
        //$(".pro-img2").height(238 * HEIGHTP);
        $(".QR-code").width(140 * WIDTHP);
        $(".QR-code").height(140 * HEIGHTP);
        $(".QR-code").css("top",90 * WIDTHP);
        $(".main").height($(window).height() - $(".header").height() )
        $(".top-img").on("touchstart",function() {
            $(".page-wrap").css("display","none");
            $(".show-img").css("display","block");
            $(".proimg-wrap img").remove();
            var src = $(".pro-img1").attr("src");
            var srcurl = "<img src='"+src+"'>"
            console.log(src)
            $(".proimg-wrap").append(srcurl)
        })

        $(".close").on("touchend",function() {
            $(".page-wrap").css("display","block");
            $(".show-img").css("display","none");
        })
        $('.back').on('click', function () {
           window.location=path+"/member/memberCenter.html";
        });
        //微信jssdk config
        wx.config({
            debug : false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId : '${signObj.appid}', // 必填，公众号的唯一标识
            timestamp : '${signObj.timestamp}', // 必填，生成签名的时间戳
            nonceStr : '${signObj.noncestr}', // 必填，生成签名的随机串
            signature : '${signObj.signature}',// 必填，签名，见附录1
            jsApiList : [ 'checkJsApi', //判断当前客户端版本是否支持指定JS接口
            'onMenuShareTimeline', //分享给好友
            'onMenuShareAppMessage', //分享到朋友圈
            'onMenuShareQZone', //分享到Q空间
            'onMenuShareWeibo',//分享到微博
            'onMenuShareQQ'//分享到qq
            ]
        // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
        });
        var title="嘉华金融";
        var description="以诚创信誉，以诚促发展，想贷就贷";
        var imgUrl='${basePath}/<%=path %>/admin/images/logo.png';
        var  onOpenId = '${sessionScope.userInfo.openid}'
        wx.ready(function() { //ready函数用于调用API，如果你的网页在加载后就需要自定义分享和回调功能，需要在此调用分享函数。//如果是微信游戏结束后，需要点击按钮触发得到分值后分享，这里就不需要调用API了，可以在按钮上绑定事件直接调用。因此，微信游戏由于大多需要用户先触发获取分值，此处请不要填写如下所示的分享API
            wx.onMenuShareTimeline({ //分享到朋友圈的API  
                        title : title, // 分享标题
                        link : 'http://jh.xuanzhen-tech.com/enCode/index.html?onOpenId=' + onOpenId, // 分享链接
                        imgUrl : imgUrl, // 分享图标
                        success : function() {
                            // 用户确认分享后执行的回调函数
                        },
                        cancel : function() {
                            // 用户取消分享后执行的回调函数
                        }
                    });
            wx.onMenuShareAppMessage({//分享到朋友 
                        title : title, // 分享标题
                        desc : description, // 分享描述
                        link : 'http://jh.xuanzhen-tech.com/enCode/index.html?onOpenId=' + onOpenId, // 分享链接
                        imgUrl : imgUrl, // 分享图标
                        type : 'link', // 分享类型,music、video或link，不填默认为link
                        dataUrl : '', // 如果type是music或video，则要提供数据链接，默认为空
                        success : function() {
                            // 用户确认分享后执行的回调函数
                        },
                        cancel : function() {
                            // 用户取消分享后执行的回调函数
                        }
                    });
            wx.onMenuShareQZone({//分享到qq空间
                title: title, // 分享标题
                desc: description, // 分享描述
                link: 'http://jh.xuanzhen-tech.com/enCode/index.html?onOpenId=' + onOpenId, // 分享链接
                imgUrl: imgUrl, // 分享图标
                success: function () { 
                   // 用户确认分享后执行的回调函数
                    
                },
                cancel: function () { 
                    // 用户取消分享后执行的回调函数
                }
            });
            wx.onMenuShareWeibo({
                title: title, // 分享标题
                desc: description, // 分享描述
                link: 'http://jh.xuanzhen-tech.com/enCode/index.html?onOpenId=' + onOpenId, // 分享链接
                imgUrl: imgUrl, // 分享图标
                success: function () { 
                   // 用户确认分享后执行的回调函数
                    
                },
                cancel: function () { 
                    // 用户取消分享后执行的回调函数
                }
            });
            wx.onMenuShareQQ({//分享到qq
                title: title, // 分享标题
                desc: description, // 分享描述
                link: 'http://jh.xuanzhen-tech.com/enCode/index.html?onOpenId=' + onOpenId, // 分享链接
                imgUrl: imgUrl, // 分享图标
                success: function () { 
                   // 用户确认分享后执行的回调函数
                    
                },
                cancel: function () { 
                   // 用户取消分享后执行的回调函数
                }
            });
        });
        
</script>  
</body>
</html>
